<template>
  <div ref="lineEChartsRef" class="line-chart"></div>
</template>

<script lang="ts">
export default {
  name: 'LineECharts',
}
</script>

<script lang="ts" setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
const lineEChartsRef = ref()
onMounted(() => {
  const myChart = echarts.init(lineEChartsRef.value)
  const option = {
    grid: {
      top: 10,
      bottom: 10,
      left: 0,
      right: 0,
    },
    xAxis: {
      type: 'category',
      show: false,
      data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    },
    yAxis: {
      show: false,
    },
    series: {
      type: 'line',
      data: [23, 25, 12, 67, 35, 34, 67, 12, 54, 52, 76, 23],
      // areaStyle: {
      //   color: 'purple',
      // },
      lineStyle: {
        color: 'purple',
        width: 1,
      },
      areaStyle: {
        // color: {
        //   type: 'linear',
        //   x: 0,
        //   y: 0,
        //   x2: 0,
        //   y2: 1,
        //   colorStops: [
        //     {
        //       offset: 0,
        //       color: '#fff', // 0% 处的颜色
        //     },
        //     {
        //       offset: 1,
        //       color: 'purple', // 100% 处的颜色
        //     },
        //   ],
        //   global: false, // 缺省为 false
        // },
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#a64ca6', // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#fff', // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
      },
      smooth: true,
      showSymbol: false,
    },
  }
  myChart.setOption(option)
  window.addEventListener('resize', () => {
    myChart.resize()
  })
})
</script>

<style scoped>
.line-chart {
  width: 100%;
  height: 100%;
}
</style>
